<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive CSS Flexbox Playground</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            background: #f0f2f5;
        }
        
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
        }
        
        .playground-container {
            display: grid;
            grid-template-columns: 350px 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .controls-panel {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            max-height: calc(100vh - 100px);
            overflow-y: auto;
            position: sticky;
            top: 20px;
        }
        
        .preview-panel {
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            min-height: 600px;
        }
        
        .control-group {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .control-group:last-child {
            border-bottom: none;
        }
        
        .control-group h3 {
            margin: 0 0 15px 0;
            color: #495057;
            font-size: 1.1em;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .control-group h3::before {
            content: "📦";
            font-size: 1.2em;
        }
        
        .control-group.child-controls h3::before {
            content: "👶";
        }
        
        .control-item {
            margin-bottom: 12px;
        }
        
        .control-item label {
            display: block;
            font-size: 0.9em;
            color: #6c757d;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        .control-item select,
        .control-item input[type="number"],
        .control-item input[type="text"] {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.9em;
            background: #f8f9fa;
            transition: all 0.2s;
        }
        
        .control-item select:hover,
        .control-item input:hover {
            border-color: #aaa;
            background: white;
        }
        
        .control-item select:focus,
        .control-item input:focus {
            outline: none;
            border-color: #4CAF50;
            background: white;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
        }
        
        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        
        .checkbox-group input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        
        .checkbox-group label {
            cursor: pointer;
            user-select: none;
            margin-bottom: 0;
        }
        
        .flex-container {
            background: #e3f2fd;
            border: 3px dashed #1976d2;
            padding: 20px;
            min-height: 400px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .flex-item {
            background: #4caf50;
            color: white;
            padding: 20px;
            margin: 5px;
            text-align: center;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
            min-width: 80px;
            position: relative;
            cursor: pointer;
        }
        
        .flex-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
        }
        
        .flex-item.selected {
            background: #ff9800;
            box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.3);
        }
        
        .flex-item .item-number {
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .flex-item .item-props {
            font-size: 0.8em;
            opacity: 0.9;
            margin-top: 10px;
            line-height: 1.4;
        }
        
        .code-output {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 14px;
            overflow-x: auto;
        }
        
        .code-output pre {
            margin: 0;
        }
        
        .add-remove-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 0.9em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            flex: 1;
        }
        
        .btn-add {
            background: #4caf50;
            color: white;
        }
        
        .btn-add:hover {
            background: #45a049;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
        }
        
        .btn-remove {
            background: #f44336;
            color: white;
        }
        
        .btn-remove:hover {
            background: #da190b;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
        }
        
        .btn-reset {
            background: #9e9e9e;
            color: white;
        }
        
        .btn-reset:hover {
            background: #757575;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(158, 158, 158, 0.3);
        }
        
        .item-controls {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-top: 10px;
        }
        
        .item-controls h4 {
            margin: 0 0 10px 0;
            color: #495057;
            font-size: 1em;
        }
        
        .tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            border-bottom: 2px solid #e0e0e0;
        }
        
        .tab {
            padding: 10px 20px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1em;
            color: #6c757d;
            transition: all 0.2s;
            border-bottom: 3px solid transparent;
            margin-bottom: -2px;
        }
        
        .tab.active {
            color: #4caf50;
            border-bottom-color: #4caf50;
            font-weight: 500;
        }
        
        .tab:hover {
            color: #495057;
        }
        
        .info-box {
            background: #e8f5e9;
            border-left: 4px solid #4caf50;
            padding: 15px 20px;
            margin: 20px 0;
            border-radius: 0 8px 8px 0;
            font-size: 0.9em;
        }
        
        @media (max-width: 768px) {
            .playground-container {
                grid-template-columns: 1fr;
            }
            
            .controls-panel {
                position: static;
                max-height: none;
            }
        }
    </style>
</head>
<body>
    <h1>Interactive CSS Flexbox Playground</h1>
    
    <div class="playground-container">
        <div class="controls-panel">
            <div class="tabs">
                <button class="tab active" onclick="showTab('parent')">Parent</button>
                <button class="tab" onclick="showTab('child')">Children</button>
            </div>
            
            <div id="parent-controls">
                <div class="control-group">
                    <h3>Container Setup</h3>
                    
                    <div class="control-item">
                        <label>display</label>
                        <select id="display" onchange="updateStyles()">
                            <option value="flex">flex</option>
                            <option value="inline-flex">inline-flex</option>
                        </select>
                    </div>
                    
                    <div class="control-item">
                        <label>flex-direction</label>
                        <select id="flexDirection" onchange="updateStyles()">
                            <option value="row">row</option>
                            <option value="row-reverse">row-reverse</option>
                            <option value="column">column</option>
                            <option value="column-reverse">column-reverse</option>
                        </select>
                    </div>
                    
                    <div class="control-item">
                        <label>flex-wrap</label>
                        <select id="flexWrap" onchange="updateStyles()">
                            <option value="nowrap">nowrap</option>
                            <option value="wrap">wrap</option>
                            <option value="wrap-reverse">wrap-reverse</option>
                        </select>
                    </div>
                </div>
                
                <div class="control-group">
                    <h3>Alignment</h3>
                    
                    <div class="control-item">
                        <label>justify-content</label>
                        <select id="justifyContent" onchange="updateStyles()">
                            <option value="flex-start">flex-start</option>
                            <option value="flex-end">flex-end</option>
                            <option value="center">center</option>
                            <option value="space-between">space-between</option>
                            <option value="space-around">space-around</option>
                            <option value="space-evenly">space-evenly</option>
                        </select>
                    </div>
                    
                    <div class="control-item">
                        <label>align-items</label>
                        <select id="alignItems" onchange="updateStyles()">
                            <option value="stretch">stretch</option>
                            <option value="flex-start">flex-start</option>
                            <option value="flex-end">flex-end</option>
                            <option value="center">center</option>
                            <option value="baseline">baseline</option>
                        </select>
                    </div>
                    
                    <div class="control-item">
                        <label>align-content</label>
                        <select id="alignContent" onchange="updateStyles()">
                            <option value="stretch">stretch</option>
                            <option value="flex-start">flex-start</option>
                            <option value="flex-end">flex-end</option>
                            <option value="center">center</option>
                            <option value="space-between">space-between</option>
                            <option value="space-around">space-around</option>
                        </select>
                    </div>
                </div>
                
                <div class="control-group">
                    <h3>Spacing</h3>
                    
                    <div class="control-item">
                        <label>gap (px)</label>
                        <input type="number" id="gap" value="0" min="0" max="50" onchange="updateStyles()">
                    </div>
                </div>
            </div>
            
            <div id="child-controls" style="display: none;">
                <div class="info-box">
                    Click on any item to select it and modify its properties
                </div>
                
                <div class="control-group child-controls">
                    <h3>Selected Item: <span id="selectedItemText">None</span></h3>
                    
                    <div class="control-item">
                        <label>flex-grow</label>
                        <input type="number" id="flexGrow" value="0" min="0" max="5" step="1" onchange="updateItemStyles()">
                    </div>
                    
                    <div class="control-item">
                        <label>flex-shrink</label>
                        <input type="number" id="flexShrink" value="1" min="0" max="5" step="1" onchange="updateItemStyles()">
                    </div>
                    
                    <div class="control-item">
                        <label>flex-basis</label>
                        <input type="text" id="flexBasis" value="auto" placeholder="auto, 200px, 50%, etc." onchange="updateItemStyles()">
                    </div>
                    
                    <div class="control-item">
                        <label>align-self</label>
                        <select id="alignSelf" onchange="updateItemStyles()">
                            <option value="auto">auto</option>
                            <option value="flex-start">flex-start</option>
                            <option value="flex-end">flex-end</option>
                            <option value="center">center</option>
                            <option value="baseline">baseline</option>
                            <option value="stretch">stretch</option>
                        </select>
                    </div>
                    
                    <div class="control-item">
                        <label>order</label>
                        <input type="number" id="order" value="0" min="-5" max="5" step="1" onchange="updateItemStyles()">
                    </div>
                    
                    <div class="checkbox-group">
                        <input type="checkbox" id="floatToggle" onchange="updateItemStyles()">
                        <label for="floatToggle">Apply float: left (to see it's ignored)</label>
                    </div>
                </div>
                
                <div class="control-group">
                    <h3>Apply to All Items</h3>
                    <button class="btn btn-reset" onclick="resetAllItems()">Reset All Items</button>
                </div>
            </div>
            
            <div class="add-remove-buttons">
                <button class="btn btn-add" onclick="addItem()">+ Add Item</button>
                <button class="btn btn-remove" onclick="removeItem()">- Remove Item</button>
            </div>
        </div>
        
        <div class="preview-panel">
            <div id="flexContainer" class="flex-container">
                <div class="flex-item" onclick="selectItem(0)">
                    <div class="item-number">1</div>
                    <div class="item-props"></div>
                </div>
                <div class="flex-item" onclick="selectItem(1)">
                    <div class="item-number">2</div>
                    <div class="item-props"></div>
                </div>
                <div class="flex-item" onclick="selectItem(2)">
                    <div class="item-number">3</div>
                    <div class="item-props"></div>
                </div>
            </div>
            
            <div class="code-output">
                <pre id="codeOutput"></pre>
            </div>
        </div>
    </div>
    
    <script>
        let selectedItem = null;
        let itemStyles = {};
        
        function showTab(tab) {
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(t => t.classList.remove('active'));
            
            if (tab === 'parent') {
                document.querySelector('.tab:first-child').classList.add('active');
                document.getElementById('parent-controls').style.display = 'block';
                document.getElementById('child-controls').style.display = 'none';
            } else {
                document.querySelector('.tab:last-child').classList.add('active');
                document.getElementById('parent-controls').style.display = 'none';
                document.getElementById('child-controls').style.display = 'block';
            }
        }
        
        function updateStyles() {
            const container = document.getElementById('flexContainer');
            const display = document.getElementById('display').value;
            const flexDirection = document.getElementById('flexDirection').value;
            const flexWrap = document.getElementById('flexWrap').value;
            const justifyContent = document.getElementById('justifyContent').value;
            const alignItems = document.getElementById('alignItems').value;
            const alignContent = document.getElementById('alignContent').value;
            const gap = document.getElementById('gap').value;
            
            container.style.display = display;
            container.style.flexDirection = flexDirection;
            container.style.flexWrap = flexWrap;
            container.style.justifyContent = justifyContent;
            container.style.alignItems = alignItems;
            container.style.alignContent = alignContent;
            container.style.gap = gap + 'px';
            
            updateCodeOutput();
        }
        
        function selectItem(index) {
            const items = document.querySelectorAll('.flex-item');
            items.forEach(item => item.classList.remove('selected'));
            
            if (index >= 0 && index < items.length) {
                items[index].classList.add('selected');
                selectedItem = index;
                document.getElementById('selectedItemText').textContent = `Item ${index + 1}`;
                
                // Load current item styles
                const itemStyle = itemStyles[index] || {};
                document.getElementById('flexGrow').value = itemStyle.flexGrow || '0';
                document.getElementById('flexShrink').value = itemStyle.flexShrink || '1';
                document.getElementById('flexBasis').value = itemStyle.flexBasis || 'auto';
                document.getElementById('alignSelf').value = itemStyle.alignSelf || 'auto';
                document.getElementById('order').value = itemStyle.order || '0';
                document.getElementById('floatToggle').checked = itemStyle.float === 'left';
                
                // Switch to child tab
                showTab('child');
            }
        }
        
        function updateItemStyles() {
            if (selectedItem === null) return;
            
            const items = document.querySelectorAll('.flex-item');
            const item = items[selectedItem];
            if (!item) return;
            
            const flexGrow = document.getElementById('flexGrow').value;
            const flexShrink = document.getElementById('flexShrink').value;
            const flexBasis = document.getElementById('flexBasis').value;
            const alignSelf = document.getElementById('alignSelf').value;
            const order = document.getElementById('order').value;
            const float = document.getElementById('floatToggle').checked ? 'left' : 'none';
            
            item.style.flexGrow = flexGrow;
            item.style.flexShrink = flexShrink;
            item.style.flexBasis = flexBasis;
            item.style.alignSelf = alignSelf;
            item.style.order = order;
            item.style.float = float;
            
            // Store styles
            itemStyles[selectedItem] = {
                flexGrow, flexShrink, flexBasis, alignSelf, order, float
            };
            
            // Update item display
            updateItemDisplay(item, selectedItem);
            updateCodeOutput();
        }
        
        function updateItemDisplay(item, index) {
            const style = itemStyles[index] || {};
            const props = [];
            
            if (style.flexGrow && style.flexGrow !== '0') props.push(`grow: ${style.flexGrow}`);
            if (style.flexShrink && style.flexShrink !== '1') props.push(`shrink: ${style.flexShrink}`);
            if (style.flexBasis && style.flexBasis !== 'auto') props.push(`basis: ${style.flexBasis}`);
            if (style.alignSelf && style.alignSelf !== 'auto') props.push(`align-self: ${style.alignSelf}`);
            if (style.order && style.order !== '0') props.push(`order: ${style.order}`);
            if (style.float && style.float !== 'none') props.push(`float: ${style.float} (ignored)`);
            
            item.querySelector('.item-props').innerHTML = props.join('<br>') || 'Default';
        }
        
        function addItem() {
            const container = document.getElementById('flexContainer');
            const itemCount = container.children.length;
            const newItem = document.createElement('div');
            newItem.className = 'flex-item';
            newItem.onclick = () => selectItem(itemCount);
            newItem.innerHTML = `
                <div class="item-number">${itemCount + 1}</div>
                <div class="item-props">Default</div>
            `;
            container.appendChild(newItem);
            updateCodeOutput();
        }
        
        function removeItem() {
            const container = document.getElementById('flexContainer');
            if (container.children.length > 1) {
                const lastIndex = container.children.length - 1;
                container.removeChild(container.lastElementChild);
                delete itemStyles[lastIndex];
                if (selectedItem === lastIndex) {
                    selectedItem = null;
                    document.getElementById('selectedItemText').textContent = 'None';
                }
                updateCodeOutput();
            }
        }
        
        function resetAllItems() {
            itemStyles = {};
            const items = document.querySelectorAll('.flex-item');
            items.forEach((item, index) => {
                item.style.flexGrow = '';
                item.style.flexShrink = '';
                item.style.flexBasis = '';
                item.style.alignSelf = '';
                item.style.order = '';
                item.style.float = '';
                updateItemDisplay(item, index);
            });
            updateCodeOutput();
        }
        
        function updateCodeOutput() {
            const container = document.getElementById('flexContainer');
            const containerStyles = {
                display: container.style.display || 'flex',
                flexDirection: container.style.flexDirection || 'row',
                flexWrap: container.style.flexWrap || 'nowrap',
                justifyContent: container.style.justifyContent || 'flex-start',
                alignItems: container.style.alignItems || 'stretch',
                alignContent: container.style.alignContent || 'stretch',
                gap: container.style.gap || '0px'
            };
            
            let code = `.container {\n`;
            for (const [prop, value] of Object.entries(containerStyles)) {
                const cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
                code += `    ${cssProp}: ${value};\n`;
            }
            code += `}\n`;
            
            // Add item styles
            const items = document.querySelectorAll('.flex-item');
            items.forEach((item, index) => {
                const style = itemStyles[index];
                if (style && Object.keys(style).some(key => style[key] && style[key] !== 'none')) {
                    code += `\n.item-${index + 1} {\n`;
                    if (style.flexGrow && style.flexGrow !== '0') code += `    flex-grow: ${style.flexGrow};\n`;
                    if (style.flexShrink && style.flexShrink !== '1') code += `    flex-shrink: ${style.flexShrink};\n`;
                    if (style.flexBasis && style.flexBasis !== 'auto') code += `    flex-basis: ${style.flexBasis};\n`;
                    if (style.alignSelf && style.alignSelf !== 'auto') code += `    align-self: ${style.alignSelf};\n`;
                    if (style.order && style.order !== '0') code += `    order: ${style.order};\n`;
                    if (style.float && style.float !== 'none') code += `    float: ${style.float}; /* Ignored in flex context */\n`;
                    code += `}`;
                }
            });
            
            document.getElementById('codeOutput').textContent = code;
        }
        
        // Initialize
        updateStyles();
        
        // Update all item displays
        document.querySelectorAll('.flex-item').forEach((item, index) => {
            updateItemDisplay(item, index);
        });
    </script>
</body>
</html>
